<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图区域分布</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script type="text/javascript" src="common/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="echarts/map/js/china.js"></script>
    <script type="text/javascript">
        $(function(){
            loadChinaMap();
        })

        function loadChinaMap() {

            var chart = echarts.init($("#myMap")[0]);
            var start = $("#start").val();
            var end = $("#end").val();
            title=start+" 至 "+end+"注册用户地区分布图"
            if(start=="" && end==""){
                title="注册用户地区分布图"
            }

            $.ajax({
                url:"cloud-user/chinaMap"
                ,type:"get"
                ,dataType:"json"//期望服务器响应回来的数据类型是json；把响应回来的数据解析为json对象
                ,data:{
                    "beginDate":start,
                    "endDate":end
                }
                ,success:function(resp){
                    //data:是后台响应回来的数据，这个数据必须符合echart地图数据的格式要求
                    chart.setOption({
                        title:{
                            text:title
                        },
                        visualMap: {
                            min: 0,
                            max: 1500,
                            left: 'left',
                            top: 'bottom',
                            text: ['高','低'],
                            //calculable : true
                        },
                        tooltip: {},
                        /*legend: {
                            orient: 'vertical',
                            left: 'left',
                            data:['数据']
                        },*/
                        series: [{
                            name:"数据",
                            type: 'map',
                            map: 'china',
                            data:resp.data,

                           /* data:[
                                {"name":"河南","value":200},
                                {name:"北京",value:1200},
                                {name:"南海诸岛",value:1500},
                                {name:"台湾",value:1500, visualMap: false},
                                {name:"澳门",value:1500},
                            ],*/
                            roam:true,

                        }]
                    });
                }
            })



            //点击某一个省份的时候，会显示该省的省级地图
            chart.on('click',function(param){
                loadProvinceMap(param)
            } );

            /*provinceChart.on("click",function(param){
                console.log(param)
                //参考：http://datav.aliyun.com/tools/atlas
            })*/



        }

        //省份地图需要的数组
        var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'];
        var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川省', '贵州省', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];

        /*
        把加载省地图封装形成一个方法
         */
        function loadProvinceMap(param){
            var start = $("#start").val();
            var end = $("#end").val();
            // alert(start+"***"+end)
            var provinceChart=echarts.init($("#province")[0]);

                /*console.log("**************")
                console.log(param)
                console.log("**************")*/
                var province=provinces[provincesText.indexOf(param.name)];
                $.get('echarts/map/json/province/'+province+'.json', function (provinceJson) {
                    console.log(provinceJson)
                    echarts.registerMap(param.name, provinceJson);
                    //var chart = echarts.init(document.getElementById('myMap'));
                    /*chart.setOption({
                        series: [{
                            type: 'map',
                            map: param.name
                        }]
                    });*/
                    $.ajax({
                        url:"cloud-user/provinceMap",
                        data:{
                            "province":param.name,
                            "beginDate":start,
                            "endDate":end
                        },
                        success:function(resp){
                            provinceChart.setOption({
                                visualMap: {
                                    min: 0,
                                    max: 1500,
                                    left: 'left',
                                    top: 'bottom',
                                    text: ['高','低'],
                                    //calculable : true
                                },
                                tooltip: {},
                                /*legend: {
                                    orient: 'vertical',
                                    left: 'left',
                                    data:['数据']
                                },*/
                                series: [{
                                    name:"数据",
                                    type: 'map',
                                    map: param.name,
                                    data:resp.data,
                                    roam:true,
                                }]
                            });
                        }
                    })

                });

        }
    </script>
</head>
<body>
<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">时间段：</label>
            <div class="layui-input-inline">
                <input type="hidden" id="start" value="">
                <input type="hidden" id="end" value="">
                <input type="text" class="layui-input" id="date" placeholder=" - ">
            </div>
            <button type="button" class="layui-btn" id="search">搜索</button>
        </div>
    </div>
</div>

    <div id="myMap" style="width: 800px;height: 600px;"></div>
    <hr/>
    <div id="province" style="width: 800px;height: 600px;"></div>

<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">


    layui.use(['form','laydate'],function () {

        var form = layui.form;
        var laydate = layui.laydate;
        //日期范围
        laydate.render({
            elem: '#date'
            ,range: true
            ,done: function(value, date, endDate){
                var split = value.split(" - ");
                if (split[0] != null && split[1] != null) {
                    $("#start").val(split[0].trim());
                    $("#end").val(split[1].trim());
                }else{
                    $("#start").val("");
                    $("#end").val("");
                }

            }
        });

        $("#search").click(function () {
            loadChinaMap();
        });


    });
</script>
</body>
</html>